﻿<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <title>vCard - About</title>

	<!-- Meta Data -->
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<meta name="format-detection" content="telephone=no"/>
    <meta name="format-detection" content="address=no"/>
    <meta name="author" content="ArtTemplate" />
    <meta name="description" content="vCard" />

    <!-- Twitter data -->
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:site" content="@ArtTemplates">
    <meta name="twitter:title" content="vCard">
    <meta name="twitter:description" content="vCard">
    <meta name="twitter:image" content="assets/images/social.jpg">

    <!-- Open Graph data -->
    <meta property="og:title" content="ArtTemplate" />
    <meta property="og:type" content="website" />
    <meta property="og:url" content="your url website" />
    <meta property="og:image" content="assets/images/social.jpg" />
    <meta property="og:description" content="vCard" />
    <meta property="og:site_name" content="vCard" />

	<!-- Favicons -->
	<link rel="apple-touch-icon" sizes="144x144" href="assets/images/favicons/apple-touch-icon-144x144.png">
	<link rel="apple-touch-icon" sizes="114x114" href="assets/images/favicons/apple-touch-icon-114x114.png">
	<link rel="apple-touch-icon" sizes="72x72" href="assets/images/favicons/apple-touch-icon-72x72.png">
	<link rel="apple-touch-icon" sizes="57x57" href="assets/images/favicons/apple-touch-icon-57x57.png">
	<link rel="shortcut icon" href="assets/images/favicons/favicon.png" type="image/png">

    <!-- Styles -->
	<link rel="stylesheet" type="text/css" href="assets/styles/style.css"/>
    <link rel="stylesheet" type="text/css" href="assets/demo/style-demo.css"/>
	
	<!-- JavaScripts -->
	<script src="assets/js/jquery-3.4.1.min.js"></script>
	<!--\收藏夹-->
	<!-- Mapbox-->
	<script src='https://api.mapbox.com/mapbox-gl-js/v1.4.1/mapbox-gl.js'></script>
	<link href='https://api.mapbox.com/mapbox-gl-js/v1.4.1/mapbox-gl.css' rel='stylesheet' />

	<script src="assets/js/plugins.min.js"></script>
	<script src="assets/js/common.js"></script>
	
</head>
<body>
    <!-- Preloader -->
    <div class="preloader">
	    <div class="preloader__wrap">
		    <div class="circle-pulse">
                <div class="circle-pulse__1"></div>
                <div class="circle-pulse__2"></div>
            </div>
		    <div class="preloader__progress"><span></span></div>
		</div>
	</div>

    <main class="main">
	    <!-- Header Image -->
		<div class="header-image">
		    <div class="js-parallax" style="background-image: url(assets/img/image_header.jpg);"></div>
		</div>
		
	    <div class="container gutter-top">
		    <!-- Header -->
		    <header class="header box">
			    <div class="header__left">
				    <div class="header__photo">
					    <img class="header__photo-img portrait" id="portrait" src="assets/img/main-photo.svg" alt="Ronald Robertson">
					</div>
					<div class="header__base-info">
					    <h4 class="title title--h4" id="userName">Defualt</h4>
						<div class="status signature" id="signature">Defualt</div>
						<ul class="header__social">
<!--						    <li><a href="https://www.facebook.com"><i class="font-icon icon-facebook1"></i></a></li>-->
						    <li><a href="/shop-app/homePage.html"><i class="font-icon icon-twitter1"></i></a></li>
							<li><a href="/shop-center/update.html"><i class="font-icon icon-instagram1"></i></a></li>
						</ul>
					</div>
				</div>
				<div class="header__right">
					<ul class="header__contact">
						<li><span class="overhead">Email</span><span class="email">Defualt@example.com</span></li>
						<li><span class="overhead">Phone</span><span class="phone">+1 (070) 123–8459</span></li>
					</ul>
					<ul class="header__contact">
						<li><span class="overhead">Birthday</span><span class="birthday">17 March, 1995</span></li>
						<li><span class="overhead">integral</span><span class="location">Defualt</span></li>
					</ul>
				</div>
			</header>
			
		    <div class="row sticky-parent">
			    <!-- Sidebar nav -->
                <aside class="col-12 col-md-12 col-lg-2">
				    <div class="sidebar box sticky-column">
	                    <ul class="nav js-tabs" id="js-tabs">
							<li class="nav__item"><a href="#works-tab" class="collection"><i class="icon-codesandbox"></i>Collection</a></li>
							<li class="nav__item"><a class="active" href="#about-tab"><i class="icon-user"></i>About</a></li>
							<!--<li class="nav__item"><a href="#resume-tab"><i class="icon-file-text"></i>Resume</a></li>
                            <li class="nav__item"><a href="#blog-tab"><i class="icon-book-open"></i>Blog</a></li>
                            <li class="nav__item"><a href="#contact-tab"><i class="icon-book"></i>Contact</a></li>-->
                        </ul>
					</div>
		        </aside>
		        
				<!-- Content -->
		        <div class="col-12 col-md-12 col-lg-10">
				    <div class="box box-content"  id="content">
			            <div class="content">
						    <!-- ABOUT -->
						    <div id="about-tab" class="tabcontent active">
                                <div class="pb-0 pb-sm-2">
		                            <h1 class="title title--h1 first-title title__separate">About Me</h1>
						            <p>I'm Creative Director and UI/UX Designer from Sydney, Australia, working in web development and print media. I enjoy turning complex problems into simple, beautiful and intuitive designs.</p>
                                    <p>My job is to build your website so that it is functional and user-friendly but at the same time attractive. Moreover, I add personal touch to your product and make sure that is eye-catching and easy to use. My aim is to bring across your message and identity in the most creative way. I created web design for many famous brand companies.</p>
					            </div>
						
								<!-- What -->
								<div class="mt-1">
									<h2 class="title title--h3">What I'm Doing</h2>
									<div class="row">
										<!-- Case Item -->
										<div class="col-12 col-lg-6">
											<div class="case-item">
												<img class="case-item__icon" src="assets/icons/icon-design.svg" alt="" />
												<div>
													<h3 class="title title--h4">Web Design</h3>
													<p class="case-item__caption">The most modern and high-quality design made at a professional level.</p>
												</div>	
											</div>
										</div>
										
										<!-- Case Item -->
										<div class="col-12 col-lg-6">
											<div class="case-item">
												<img class="case-item__icon" src="assets/icons/icon-dev.svg" alt="" />
												<div>
													<h3 class="title title--h4">Web Development</h3>
													<p class="case-item__caption">High-quality development of sites at the professional level.</p>
												</div>
											</div>
										</div>
										
										<!-- Case Item -->
										<div class="col-12 col-lg-6">
											<div class="case-item">
												<img class="case-item__icon" src="assets/icons/icon-app.svg" alt="" />
												<div>
													<h3 class="title title--h4">Mobile Apps</h3>
													<p class="case-item__caption">Professional development of applications for iOS and Android.</p>
												</div>
										   </div>
										</div>
										
										<!-- Case Item -->
										<div class="col-12 col-lg-6">
											<div class="case-item">
												<img class="case-item__icon" src="assets/icons/icon-photo.svg" alt="" />
												<div>
													<h3 class="title title--h4">Photography</h3>
													<p class="case-item__caption">I make high-quality photos of any category at a professional level.</p>
												</div>
											</div>
										</div>
									</div>	
								</div>
						
								<!-- Testimonials -->
								<div class="mt-2">
									<h2 class="title title--h3">Testimonials</h2>
									<div class="swiper-container js-carousel-review">
										<div class="swiper-wrapper">
											<!-- Item review -->
											<div class="swiper-slide review-item">
												<svg class="avatar avatar--80" viewBox="0 0 84 84">
													<g class="avatar__hexagon">
														<image xlink:href="assets/img/avatar-2.jpg" height="100%" width="100%" />
													</g>
												</svg>
												<div class="review-item__textbox">
													<h4 class="title title--h5">Daniel Lewis</h4>
													<p class="review-item__caption">Felecia was hired to create a corporate identity. We were very pleased with the work done.</p>
												</div>
											</div>
											
											<!-- Item review -->
											<div class="swiper-slide review-item">
												<svg class="avatar avatar--80" viewBox="0 0 84 84">
													<g class="avatar__hexagon">
														<image xlink:href="assets/img/avatar-3.jpg" height="100%" width="100%" />
													</g>
												</svg>
												<div class="review-item__textbox">
													<h4 class="title title--h5">Jessica Miller</h4>
													<p class="review-item__caption">thanks to the skill of Felecia, we have a design that we can be proud of.</p>
												</div>
											</div>
											
											<!-- Item review -->
											<div class="swiper-slide review-item">
												<svg class="avatar avatar--80" viewBox="0 0 84 84">
													<g class="avatar__hexagon">
														<image xlink:href="assets/img/avatar-4.jpg" height="100%" width="100%" />
													</g>
												</svg>
												<div class="review-item__textbox">
													<h4 class="title title--h5">Tanya Ruiz</h4>
													<p class="review-item__caption">Felecia was hired to create a corporate identity. We were very pleased with the work done.</p>
												</div>
											</div>
											
											<!-- Item review -->
											<div class="swiper-slide review-item">
												<svg class="avatar avatar--80" viewBox="0 0 84 84">
													<g class="avatar__hexagon">
														<image xlink:href="assets/img/avatar-5.jpg" height="100%" width="100%" />
													</g>
												</svg>
												<div class="review-item__textbox">
													<h4 class="title title--h5">Thomas Castro</h4>
													<p class="review-item__caption">thanks to the skill of Felecia, we have a design that we can be proud of.</p>
												</div>
											</div>
										</div>
			
										<div class="swiper-pagination"></div>
									</div>
								</div>
						
								<!-- Clients -->
								<div class="mt-4">
									<h2 class="title title--h3">Clients</h2>
									
									<div class="swiper-container js-carousel-clients">
										<div class="swiper-wrapper">
											<!-- Item client -->
											<div class="swiper-slide">
												<a href="#"><img src="assets/img/logo-1.svg" alt="Logo" /></a>
											</div>
											
											<!-- Item client -->
											<div class="swiper-slide">
												<a href="#"><img src="assets/img/logo-2.svg" alt="Logo" /></a>
											</div>

											<!-- Item client -->
											<div class="swiper-slide">
												<a href="#"><img src="assets/img/logo-3.svg" alt="Logo" /></a>
											</div>

											<!-- Item client -->
											<div class="swiper-slide">
												<a href="#"><img src="assets/img/logo-4.svg" alt="Logo" /></a>
											</div>
											
											<!-- Item client -->
											<div class="swiper-slide">
												<a href="#"><img src="assets/img/logo-1.svg" alt="Logo" /></a>
											</div>
											
											<!-- Item client -->
											<div class="swiper-slide">
												<a href="#"><img src="assets/img/logo-2.svg" alt="Logo" /></a>
											</div>
										</div>
										
										<div class="swiper-pagination"></div>
									</div>
								</div>
						    </div>
							
							<!-- RESUME -->
							<div id="resume-tab" class="tabcontent">
                                <div class="pb-2">
		                            <h1 class="title title--h1 first-title title__separate">Resume</h1>
					            </div>
						
								<!-- Experience -->
								<div class="row">
									<div class="col-12">
										<h2 class="title title--h3"><img class="title-icon" src="assets/icons/icon-education.svg" alt="" /> Education</h2>
										<div class="timeline">
											<!-- Item -->
											<article class="timeline__item">
												<h5 class="title title--h5 timeline__title">University School of the Arts</h5>
												<span class="timeline__period">2007 — 2009</span>
												<p class="timeline__description">Nemo enims ipsam voluptatem, blanditiis praesentium voluptum delenit atque corrupti, quos dolores et quas molestias exceptur.</p>
											</article>
												
											<!-- Item -->
											<article class="timeline__item">
												<h5 class="title title--h5 timeline__title">New York Academy of Art</h5>
												<span class="timeline__period">2005 — 2007</span>
												<p class="timeline__description">Ratione voluptatem sequi nesciunt, facere quisquams facere menda ossimus, omnis voluptas assumenda est omnis..</p>
											</article>
												
											<!-- Item -->
											<article class="timeline__item">
												<h5 class="title title--h5 timeline__title">High School of Art and Design</h5>
												<span class="timeline__period">2003 — 2005</span>
												<p class="timeline__description">Duis aute irure dolor in reprehenderit in voluptate, quila voluptas  mag odit aut fugit, sed consequuntur magni dolores eos.</p>
											</article>
										</div>	
									</div>
										
									<div class="col-12">
										<h2 class="title title--h3"><img class="title-icon" src="assets/icons/icon-experience.svg" alt="" /> Experience</h2>
										<div class="timeline">
											<!-- Item -->
											<article class="timeline__item">
												<h5 class="title title--h5 timeline__title">Creative Director</h5>
												<span class="timeline__period">2015 — Present</span>
												<p class="timeline__description">Nemo enim ipsam voluptatem blanditiis praesentium voluptum delenit atque corrupti, quos dolores et qvuas molestias exceptur.</p>
											</article>
												
											<!-- Item -->
											<article class="timeline__item">
												<h5 class="title title--h5 timeline__title">Art Director</h5>
												<span class="timeline__period">2013 — 2015</span>
												<p class="timeline__description">Nemo enims ipsam voluptatem, blanditiis praesentium voluptum delenit atque corrupti, quos dolores et quas molestias exceptur.</p>
											</article>
												
											<!-- Item -->
											<article class="timeline__item">
												<h5 class="title title--h5 timeline__title">Web Designer</h5>
												<span class="timeline__period">2010 — 2013</span>
												<p class="timeline__description">Nemo enims ipsam voluptatem, blanditiis praesentium voluptum delenit atque corrupti, quos dolores et quas molestias exceptur.</p>
											</article>
										</div>
									</div>
								</div>
								
								<!-- Skills -->
								<div class="row">
									<div class="col-12">
										<h2 class="title title--h3">My Skills</h2>
										<div class="box box__border">
											<!-- Progress -->
											<div class="progress">
												<div class="progress-bar" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100">
													<div class="progress-text"><span>Web Design</span><span>80%</span></div>
												</div>
												<div class="progress-text"><span>Web Design</span></div>
											</div>
												
											<!-- Progress -->
											<div class="progress">
												<div class="progress-bar" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
													<div class="progress-text"><span>Graphic Design</span><span>75%</span></div>
												</div>
												<div class="progress-text"><span>Graphic Design</span></div>
											</div>
												
											<!-- Progress -->
											<div class="progress">
												<div class="progress-bar" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100">
													<div class="progress-text"><span>Photoshop</span><span>90%</span></div>
												</div>
												<div class="progress-text"><span>Photoshop</span></div>
											</div>
												
											<!-- Progress -->
											<div class="progress">
												<div class="progress-bar" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
													<div class="progress-text"><span>Illustrator</span><span>50%</span></div>
												</div>
												<div class="progress-text"><span>Illustrator</span></div>
											</div>
										</div>
									</div>
								</div>
							</div>
							
							<!-- WORKS -->
							<div id="works-tab" class="tabcontent">
                                <div class="pb-2">
		                            <h1 class="title title--h1 first-title title__separate">Portfolio</h1>
					            </div>
						
								<!-- Filter -->
								<div class="select">
									<span class="placeholder">Select category</span>
									<ul class="filter">
										<li class="filter__item">Category</li>
										<li class="filter__item active" data-filter="*"><a class="filter__link active" href="#filter">All</a></li>
										<li class="filter__item" data-filter=".category-Daily"><a class="filter__link" href="#filter">Daily</a></li>
										<li class="filter__item" data-filter=".category-Appliance"><a class="filter__link" href="#filter">Appliance</a></li>
										<li class="filter__item" data-filter=".category-Down"><a class="filter__link" href="#filter">Mark&Down</a></li>
									</ul>
									<input type="hidden" name="changemetoo"/>
								</div>

								<!-- Gallery -->
								<div class="gallery-grid js-grid-row js-filter-container">
									<div class="gutter-sizer"  ></div>



								</div><!-- Gallery End -->
							<div style="height: 530px;width: 850px" id="collections">
								<figure class="gallery-grid__item category-concept" style="float: left;margin-left: 20px">
									<div class="gallery-grid__image-wrap">
										<img class="gallery-grid__image cover lazyload" src="assets/img/image_07.jpg" data-zoom alt="" />
									</div>
									<figcaption class="gallery-grid__caption">
										<h4 class="title title--h6 gallery-grid__title">Peach</h4>
										<span class="gallery-grid__category">Concept</span>
									</figcaption>
								</figure>
								<figure class="gallery-grid__item category-concept" style="float: left;margin-left: 20px">
									<div class="gallery-grid__image-wrap">
										<img class="gallery-grid__image cover lazyload" src="assets/img/image_07.jpg" data-zoom alt="" />
									</div>
									<figcaption class="gallery-grid__caption">
										<h4 class="title title--h6 gallery-grid__title">Peach</h4>
										<span class="gallery-grid__category">Concept</span>
									</figcaption>
								</figure>
									<figure class="gallery-grid__item category-concept" style="float: left;margin-left: 20px">
									<div class="gallery-grid__image-wrap">
										<img class="gallery-grid__image cover lazyload" src="assets/img/image_07.jpg" data-zoom alt="" />
									</div>
									<figcaption class="gallery-grid__caption">
										<h4 class="title title--h6 gallery-grid__title">Peach</h4>
										<span class="gallery-grid__category">Concept</span>
									</figcaption>
								</figure><figure class="gallery-grid__item category-concept" style="float: left;margin-left: 20px">
									<div class="gallery-grid__image-wrap">
										<img class="gallery-grid__image cover lazyload" src="assets/img/image_07.jpg" data-zoom alt="" />
									</div>
									<figcaption class="gallery-grid__caption">
										<h4 class="title title--h6 gallery-grid__title">Peach</h4>
										<span class="gallery-grid__category">Concept</span>
									</figcaption>
								</figure><figure class="gallery-grid__item category-concept" style="float: left;margin-left: 20px">
									<div class="gallery-grid__image-wrap">
										<img class="gallery-grid__image cover lazyload" src="assets/img/image_07.jpg" data-zoom alt="" />
									</div>
									<figcaption class="gallery-grid__caption">
										<h4 class="title title--h6 gallery-grid__title">Peach</h4>
										<span class="gallery-grid__category">Concept</span>
									</figcaption>
								</figure><figure class="gallery-grid__item category-concept" style="float: left;margin-left: 20px">
									<div class="gallery-grid__image-wrap">
										<img class="gallery-grid__image cover lazyload" src="assets/img/image_07.jpg" data-zoom alt="" />
									</div>
									<figcaption class="gallery-grid__caption">
										<h4 class="title title--h6 gallery-grid__title">Peach</h4>
										<span class="gallery-grid__category">Concept</span>
									</figcaption>
								</figure>
							</div>
								<nav aria-label="Page navigation example" >
									<ul class="pagination justify-content-center" >
										<li class="page-item">
											<a class="page-link" onclick="backPage()" aria-label="Previous">
												<span aria-hidden="true">&laquo;</span>
												<span class="sr-only" >Previous</span>
											</a>
										</li>
										<li class="page-item"><a class="page-link" onclick="pageCollection(1)">1</a></li>
										<li class="page-item"><a class="page-link" onclick="pageCollection(2)">2</a></li>
										<li class="page-item"><a class="page-link" onclick="pageCollection(3)">3</a></li>
										<li class="page-item">
											<a class="page-link" onclick="forPage()" aria-label="Next">
												<span aria-hidden="true">&raquo;</span>
												<span class="sr-only">Next</span>
											</a>
										</li>
									</ul>
								</nav>
							</div>
							<script src="assets/js/collection.js"></script>

							<!-- BLOG -->
							<div id="blog-tab" class="tabcontent">
                                <div class="pb-2">
		                            <h1 class="title title--h1 first-title title__separate">Blog</h1>
					            </div>

								<!-- News -->
								<div class="news-grid">
									<!-- Post -->
									<article class="news-item box">
										<div class="news-item__image-wrap overlay overlay--45">
											<div class="news-item__date">16<span>Jun</span></div>
											<a class="news-item__link" href="single-post.html"></a>
											<img class="cover lazyload" src="assets/img/image_02.jpg" alt="" />
										</div>
										<div class="news-item__caption">
											<h2 class="title title--h4">Design Conferences in 2019</h2>
											<p>Veritatis et quasi architecto beatae vitae dicta sunt, explicabo.</p>
										</div>
									</article>

									<!-- Post -->
									<article class="news-item box">
										<div class="news-item__image-wrap overlay overlay--45">
											<div class="news-item__date">15<span>Jun</span></div>
											<a class="news-item__link" href="single-post.html"></a>
											<img class="cover lazyload" src="assets/img/image_06.jpg" alt="" />
										</div>
										<div class="news-item__caption">
											<h2 class="title title--h4">Best Fonts Every Designer</h2>
											<p>Sed ut perspiciatis, nam libero tempore, cum soluta nobis est eligendi.</p>
										</div>
									</article>

									<!-- Post -->
									<article class="news-item box">
										<div class="news-item__image-wrap overlay overlay--45">
											<div class="news-item__date">14<span>Jun</span></div>
											<a class="news-item__link" href="single-post.html"></a>
											<img class="cover lazyload" src="assets/img/image_08.jpg" alt="" />
										</div>
										<div class="news-item__caption">
											<h2 class="title title--h4">Design Digest #80</h2>
											<p>Excepteur sint occaecat cupidatat no proident, quis nostrum exercitationem ullam corporis suscipit.</p>
										</div>
									</article>
									
									<!-- Post -->
									<article class="news-item box">
										<div class="news-item__image-wrap overlay overlay--45">
											<div class="news-item__date">13<span>Jun</span></div>
											<a class="news-item__link" href="single-post.html"></a>
											<img class="cover lazyload" src="assets/img/image_07.jpg" alt="" />
										</div>
										<div class="news-item__caption">
											<h2 class="title title--h4">UI Interactions of the week</h2>
											<p>Enim ad minim veniam, consectetur adipiscing elit, quis nostrud exercitation ullamco laboris nisi.</p>
										</div>
									</article>
									
									<!-- Post -->
									<article class="news-item box">
										<div class="news-item__image-wrap overlay overlay--45">
											<div class="news-item__date">12<span>Jun</span></div>
											<a class="news-item__link" href="single-post.html"></a>
											<img class="cover lazyload" src="assets/img/image_05.jpg" alt="" />
										</div>
										<div class="news-item__caption">
											<h2 class="title title--h4">The Forgotten Art of Spacing</h2>
											<p>Maxime placeat, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
										</div>
									</article>
									
									<!-- Post -->
									<article class="news-item box">
										<div class="news-item__image-wrap overlay overlay--45">
											<div class="news-item__date">10<span>Jun</span></div>
											<a class="news-item__link" href="single-post.html"></a>
											<img class="cover lazyload" src="assets/img/image_01.jpg" alt="" />
										</div>
										<div class="news-item__caption">
											<h2 class="title title--h4">Design Digest #79</h2>
											<p>Optio cumque nihil impedit uo minus quod maxime placeat, velit esse cillum.</p>
										</div>
									</article>
								</div>
							</div>

							<!-- CONTACT -->
							<div id="contact-tab" class="tabcontent">
                                <div class="pb-2">
									<h1 class="title title--h1 first-title title__separate">Contact</h1>
								</div>

								<!-- Contact -->
								<div class="map" id="map"></div>
								<h2 class="title title--h3">Contact Form</h2>
									
								<form id="contact-form" class="contact-form" data-toggle="validator">
									<div class="row">
										<div class="form-group col-12 col-md-6">
											<input type="text" class="form-control" id="nameContact" name="nameContact" placeholder="Full name" required="required" autocomplete="on" oninvalid="setCustomValidity('Fill in the field')" onkeyup="setCustomValidity('')">
											<div class="help-block with-errors"></div>
										</div>
										<div class="form-group col-12 col-md-6">
											<input type="email" class="form-control" id="emailContact" name="emailContact" placeholder="Email address" required="required" autocomplete="on" oninvalid="setCustomValidity('Email is incorrect')" onkeyup="setCustomValidity('')">
											<div class="help-block with-errors"></div>
										</div>
										<div class="form-group col-12 col-md-12">
											<textarea class="textarea form-control" id="messageContact" name="messageContact" placeholder="Your Message"  rows="4" required="required" oninvalid="setCustomValidity('Fill in the field')" onkeyup="setCustomValidity('')"></textarea>
											<div class="help-block with-errors"></div>
										</div>
									</div>
									<div class="row">
										<div class="col-12 col-md-6 order-2 order-md-1 text-center text-md-left">
											<div id="validator-contact" class="hidden"></div>
										</div>
										<div class="col-12 col-md-6 order-1 order-md-2 text-right">
											<button type="submit" class="btn"><i class="font-icon icon-send"></i> Send Message</button>
										</div>
									</div>
								</form>
							</div>
						</div>
					</div>
					<!-- Footer -->
					<footer class="footer">© 2019 vCard</footer>
		        </div>
			</div>
		</div>	
    </main>

    <div class="back-to-top"></div>

    <!-- SVG masks -->
    <svg class="svg-defs">
        <clipPath id="avatar-box">
            <path d="M1.85379 38.4859C2.9221 18.6653 18.6653 2.92275 38.4858 1.85453 56.0986.905299 77.2792 0 94 0c16.721 0 37.901.905299 55.514 1.85453 19.821 1.06822 35.564 16.81077 36.632 36.63137C187.095 56.0922 188 77.267 188 94c0 16.733-.905 37.908-1.854 55.514-1.068 19.821-16.811 35.563-36.632 36.631C131.901 187.095 110.721 188 94 188c-16.7208 0-37.9014-.905-55.5142-1.855-19.8205-1.068-35.5637-16.81-36.63201-36.631C.904831 131.908 0 110.733 0 94c0-16.733.904831-37.9078 1.85379-55.5141z"/>
        </clipPath>
        <clipPath id="avatar-hexagon">
             <path d="M0 27.2891c0-4.6662 2.4889-8.976 6.52491-11.2986L31.308 1.72845c3.98-2.290382 8.8697-2.305446 12.8637-.03963l25.234 14.31558C73.4807 18.3162 76 22.6478 76 27.3426V56.684c0 4.6805-2.5041 9.0013-6.5597 11.3186L44.4317 82.2915c-3.9869 2.278-8.8765 2.278-12.8634 0L6.55974 68.0026C2.50414 65.6853 0 61.3645 0 56.684V27.2891z"/>
        </clipPath>		
    </svg>

 



	<!-- Mapbox init -->
	<script src="assets/js/mapbox.init.js"></script>

	<script src="assets/demo/plugins-demo.js"></script>

	<!--用户信息渲染-->
	<script src="assets/js/userInfo.js"></script>
	<!--缓存信息-->
<!--	<script src="assets/js/CacheUtil.js"></script>-->


</body>

</html>